<template>
	<view :class="currentTheme">
		<a-nabbar name="开本视频" />
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class=" u-padding-left-32 u-padding-right-32">
				<view class="u-flex u-padding-top-32">
					<view class="u-flex-1"><item-search placeholder="搜索视频" @change="downCallback" v-model="form.name"></item-search></view>
				</view>
				<view class="content-father">
					<view class="content u-margin-top-20" v-for="(item, index) in dataList" :key="index" @click="goPathDetail(item)">
						<view class="content-neinei">
							<item-image :img="item.image" :width="330" :height="240" :radius="26" />
							<view class="storeProducts-name u-flex">
								<text>{{ item.createName || '' }}</text>
								<view>
									<u-icon name="yidongduanicon-" custom-prefix="custom-icon" color="#fff" size="26" />
									<text>{{ item.browse || 0}}</text>
								</view>
							</view>
						</view>
            <view class="content-bottom u-line-2">
              {{item.name}}
            </view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import upCallback from '@/mixins/upCallbackMixin.js';
import { deleteIds, getDetail, add } from '@/api/crud.js';
import searchMixins from '@/mixins/searchMixins.js';
import itemSearch from '@/components/itemSearch/itemSearch.vue';
import { getAdvertising } from '@/api/advertising.js';
export default {
	mixins: [upCallback, searchMixins],
	components: {
		itemSearch
	},
	data() {
		return {
			apiModule: 'shopApi',
			apiType: 'videoPlay',
			form: {
				name: ''
			},
			name: 'thirdQuery',
			option: {},
			count: 0
		};
	},
  filters: {
    nameFilters(val){
      if(val && val.length>8) {
          val = val.substring(0,10) + '···'
        } else {
          return val
        }
        return val
    }
  },
	computed: {},
	onLoad(option) {},
	methods: {
		goPathDetail(item) {
			console.log(item);
			this.$u.route({
				url: '/pagesA/openScript/openScriptDetail',
				params: {
					id: item.id,
					name: item.name
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-father {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  padding-bottom: 20rpx;
}

.jianxi {
	margin-right: 10rpx;
	margin-bottom: -10rpx;
  z-index: 999;

}

.storeProducts-name {
	position: relative;
	top: -36rpx;
	border-radius: 0 0 26rpx 26rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	left: 0px;
	color: #fff;
	font-size: 20rpx;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
  z-index: 1;

}

.content-neinei {
  flex: 1;
}

.content {
  height: 320rpx;
  z-index: 1;
  width:330rpx;
}

.content-bottom {
  flex: 1;
  background-color: #FCFCFC;
  // width: 100%;
  height: 100rpx;
  position: relative;
  top: -50rpx;
  z-index: -1;
  border-radius:0 0 26rpx 26rpx;
  padding: 22rpx;
  color: #000;
  font-size: 26rpx;
  overflow: hidden;
  line-height: 38rpx;
}
</style>
